<template>

  <v-dialog v-model="dialog" max-width="500px" persistent>
    <v-card>
      <v-container>


        <!-- <v-select v-model="selectionType" :items="['leaf', 'independent']" label="Selection type"></v-select> -->

        <v-row>

          <v-col>
              <!-- activatable 激活样式 -->
            <v-treeview v-model="selection" :items="items" :selection-type="selectionType" selectable return-object open-all>
            </v-treeview>
          </v-col>

          <!-- <v-divider vertical></v-divider> -->


          <v-col class="pa-2" cols="12">
            <template v-if="!selection.length">No nodes selected.</template>

            <template v-else>
              <div v-for="node in selection" :key="node.id">
                {{ node.name }}
              </div>
            </template>
          </v-col>


          <v-col class="pa-2" cols="12" style="text-align:right">
            <v-btn @click="emitHandler">关闭</v-btn>
            <v-btn color="primary">确认</v-btn>
          </v-col>




        </v-row>


      </v-container>
    </v-card>
  </v-dialog>



</template>

<script>
  export default {
    data: () => ({
      selectionType: 'independent',
      selection: [],
      items: [{
        id: 1,
        name: 'Root',
        children: [{
            id: 2,
            name: 'Child #1'
          },
          {
            id: 3,
            name: 'Child #2'
          },
          {
            id: 4,
            name: 'Child #3',
            children: [{
                id: 5,
                name: 'Grandchild #1'
              },
              {
                id: 6,
                name: 'Grandchild #2'
              },
            ],
          },
        ],
      }, ],
    }),

    props: {
      dialog: {
        type: Boolean,
        default: false
      }
    },

    methods: {
      emitHandler() {
        this.$emit('isShowDialogStore', false)
      }
    }
  }

</script>

<style>
  .v-btn {
    margin: 0 5px
  }

</style>
